<template>
	<div>
		<Row>
			<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
			<Input class="w-100" v-model="searchKey.name" placeholder="请输入设备名" />
			</Col>
		</Row>
		<Row>
			<div class="w-100 d-flex justify-content-between align-items-center ">
				<Button class="m-1" type="error" shape="circle" @click="newSb" icon="md-add">新增</Button>
				<Button class="m-1" type="primary" shape="circle" @click="searchs" icon="ios-search">查询</Button>
			</div>
		</Row>
		<div class="mt-1">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				
				<template slot-scope="{ row, index }" slot="fengmian">
					<div>
						<img style="width: 40px; height: 40px;" :src="row.cover" />
					</div>
				</template>


				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" class="mr-2" @click="show(row.sbid)">详细</Button>
					<Button type="error" size="small" @click="remove(row.sbid)">删除</Button>
				</template>
			</Table>
		</div>
		<div>
			<Page class="text-right mt-3" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				searchKey: {
					"name": "",
				},
				tableInfo: {
					currentPage: 1,
					pageSize: 10,
					total: 0,
					columnInfo: [
						{
							title: "封面",
							//key:"cover",
							slot:"fengmian",
							width: 136
						},
						{
							title: "设备编号",
							key: "sbid",
						},
						{
							title: "设备名称",
							key: "name",
						},
						{
							title: "描述",
							key: "ms",
						},
						{
							title: "所属房间",
							key: "roomid",
						},
						
						{
							title: "操作",
							slot: 'action',
							width: 150
						}
					],
					data: []
				}
			}
		},
		props: {
			params: {
				type: Object,
				default: undefined,
			}
		},
		methods: {
			init: function() {
					this.tableInfo.currentPage = 0;
					this.search();
				},
				newSb: function() {
					this.$router.push({
						path: "/sb/new"
					})
				},
				show: function(sbId) {
					this.$router.push({
						path: "/sb/detail?sbId=" + sbId
					})
				},
			
				
				remove: function(sbId) {
					this.message.confirm({
						title: "删除提示",
						content: "即将删除设备，确定吗？",
						onOk: () => {
							this.http.delete({
								url: "/sb/info",
								param: {
									sbId
								}
							}).then(data => {
								this.search();
							});
						},
						onCancel: () => {
							this.message.info('操作已取消');
						}
					});
				},
				searchs: function() {
					this.tableInfo.currentPage = 1;
					this.search();
				},
				search: function() {
					this.http.get({
						url: "/sb/page",
						param: {
							// 传一个当前页
							current: this.tableInfo.currentPage,
							size:this.tableInfo.pageSize,
							
						}
					}).then(data => {
						this.tableInfo.data = data.records;
						this.tableInfo.currentPage = data.current;
						this.tableInfo.total = data.total;
						this.tableInfo.pageSize = data.size;
					});
				},
				pageSearch: function(changedPage) {
					this.tableInfo.currentPage = changedPage;
					this.search();
				}
			
		},
		created: function() {
			this.init();
		}
	}
</script>

<style>
</style>
